<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Lab 2 exercise 6</title>
</head>
<body style="background-color:#ffffff; color:#000000; font-size:1.5em;" id="example">
	<a name="TOP"></a>
	<nav style="background-color: #292929; color: white; position: absolute; left: 0px; top: 5%; width: 150px; height: 80%; padding: 5px; padding-right: 20px;">
		<p>This will be the navigation 'column', which will run down the left of the page.</p>
	</nav>
	<main style="position: absolute; right: 190px; top: 440px; background-color: orange; width: 65%; padding: 20px;">
		<p>And this will be the main content block. I have not used another HTML tag beyond the structural semantic elements and some div elements on this page to lay it out. No <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics" style="font-weight: bold">tables</a>, no transparent images; just <strong>div</strong>s and style commands.</p>
		<p>Notice how this layer looks like a table, but it is positioned above the layer to the left.</p>
	</main>
	<section style="z-index: 2; position: absolute; left: 610px; top: 80px; background-color: yellow; width: 400px; padding: 20px; border: red 2px dashed;">
		<p>And yet another layer goes below the main content.
		<p>Notice the tasteful border? Yes, me neither</p>
	</section>
	<div style="position: absolute; left: 10px; bottom: 200px; background-color: #0099CC; padding: 20px; color: white; border: 5px white groove; font-size: 13pt;">
		<p>I could go on, but I think you see the brilliance of these things.</p>
	</div>
	<div style="position: absolute; left: 120px; bottom: 300px; background-color: green; width: 150px; padding: 20px; color: white; border: 10px black double;">
		<p>Make sure you view the <strong>source</strong> of this page to properly understand what's going on here.</p>
	</div>
	<div style="z-index: 1; position: absolute; right: 10px; top: 350px; background-color: red; width: 150px; padding: 20px;">
		<p>Now, try resizing this window by pulling the corner. The layers will move around as the page sides get closer to them.</p>
	</div>
	<aside style="z-index: 1; position: absolute; right: 210px; top: 400px; background-color: blue; color: white; width: 250px; padding: 20px;">
		<p>with thanks to www.yourhtmlsource.com for providing this code as part of one of their examples. And apologies for "butchering" it!</p>
	</aside>
	<header>
		<h1>Lab 2 - Exercise 6</h1>
		<p>And here's some words. This text comes last in the code, but appears top of the page.</p>
	</header>
</body>
</html>